<template>
  <div style="width: 100%">
    <div style="position: relative">
      <u-swiper keyName="img" height="550" :list="list1" @click="imgclick"></u-swiper>
    </div>
    <div style="padding: 0 15px">
      <div class="adwaffa" style="position: relative; z-index: 100; width: 100%; margin-top: -15px; border-radius: 5px">
        <div style="padding: 10px">
          <div style="font-size: 20px; font-family: dymh; font-style: italic; color: #007fff">社区生活</div>
          <div style="display: flex; height: 100%; flex-wrap: wrap">
            <div v-for="(item, index) in category" @click="gotoUrl(item)" style="width: 25%; display: flex; flex-direction: column; align-items: center" :key="index">
              <!-- 'http://www.wantongkonggu.cn/' + -->
              <image style="width: 45px; height: 45px" :src="'http://www.wantongkonggu.cn/' + item.icon"></image>
              <div style="margin-top: 5px; font-size: 12px">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px; border-radius: 10px" class="dawfgadw">
        <div style="padding: 10px">
          <div style="font-size: 20px; font-family: dymh; font-style: italic; color: #007fff">服务评价</div>
          <div style="background: #fff; border-radius: 5px; padding: 5px; margin-top: 5px" v-if="storeProductReplyList.length > 0">
            <div style="display: flex; justify-content: space-between" v-for="(item, index) in storeProductReplyList">
              <div>
                <div style="display: flex">
                  <image :src="item.avatar" style="width: 40px; height: 40px; border-radius: 50%"></image>
                  <div style="margin-left: 10px">
                    <div>
                      {{ item.nickname }}
                    </div>
                    <div style="margin-top: 5px">
                      <u-rate size="28" v-model="item.serviceScore" :count="item.serviceScore"></u-rate>
                    </div>
                  </div>
                </div>
                <div style="margin-top: 10px">
                  {{ item.comment }}
                </div>
              </div>
              <div>
                <image :src="'https://www.wantongkonggu.cn/' + item.pics" style="width: 100px; height: 100px; border-radius: 10px"></image>
              </div>
            </div>
          </div>
          <div v-else style="text-align: center; padding: 10px; padding-top: 532rpx; display: flex; flex-direction: column; align-items: center">
            <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
            <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
          </div>
        </div>
      </div>
      <div>
        <image style="width: 100%" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/12/微信图片_20251112154915_124_30_20251112154949A005.png"></image>
      </div>
    </div>
  </div>
</template>

<script>
import { getMerInfoByid } from "../../utils/api/local.js";
import { userEdit } from "../../utils/api/local";
import { notBindingPhone } from "../../utils/api/api.js";
import { programlogin, phoneAndPassword, getUserInfo, getUserPhoneNumber, newUserIntegral } from "../../utils/request_api.js";
export default {
  data() {
    return {
      storeProductReplyList: [],
      yaoiqngID: "",
      userType: "",
      authKey: "",
      openIdadw: "",
      category: [
        {
          categoryName: "综合维修",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/1_20251111160832A031.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/2_20251111160906A033.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/3_20251111160929A035.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/4_20251111160951A037.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/5_20251111161012A039.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/6_20251111161020A040.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/7_20251111161029A041.png",
        },
        {
          categoryName: "家政保洁",
          imageUrl: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/7_20251111161029A041.png",
        },
      ],
      list1: [
        {
          img: "http://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/12/Property 1=004@2x_20251112143930A073.png",
          merId: "1736570444448021",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  onload() {
    console.log("🚀 ~ options:", options);
    this.yaoiqngID = options.yaoiqngID;
    this.userType = options.type;
    this.initUser();
  },
  // 发送给朋友
  onShareAppMessage(res) {
    // this.share.path = `/${view.route}`;
    this.share.path = "/pages_h5/householdServices/index?yaoiqngID=" + uni.getStorageSync("uid") + "&type=3";

    //转发参数
    return this.share;
  },
  //分享到朋友圈
  onShareTimeline(res) {
    // this.share.path = `/${view.route}`; //分享当前页面
    this.share.path = "/pages_h5/householdServices/index?yaoiqngID=" + uni.getStorageSync("uid") + "&type=3";
    //转发参数
    return this.share;
  },
  methods: {
    getPhoneNumber(e) {
      console.log("🚀 ~ e:", e);
      if (e.detail.code && e.detail.errMsg == "getPhoneNumber:ok") {
        getUserPhoneNumber(e.detail).then((res) => {
          if (res.code == 200 && res.data.errmsg == "ok") {
            let that = this;
            this.account = res.data.phone_info.phoneNumber;
            this.awdawgawdgrr();
          } else {
            console.log("🚀 ~ getPhoneNumber ~ res:", res);
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
    },
    awdawgawdgrr() {
      var params = {
        avatar: this.userInfo.avatar,
        nickname: this.userInfo.nickname,
        phone: this.account,
        account: this.account,
      };
      userEdit(params).then((res) => {
        this.initUser();
      });
    },
    initUser() {
      uni.showLoading();
      getUserInfo()
        .then((res) => {
          if (res.code === 401) {
            this.showloginJs();
          } else {
            this.userInfo = res.data;
            if (res.data.phone) {
              this.faddaad = true;
            } else {
              this.faddaad = false;
            }
            uni.setStorageSync("userInfo", res.data);
            uni.hideLoading();
          }
        })
        .catch((err) => {
          console.error("获取用户信息失败", err);
          uni.hideLoading();
        });
    },
    showloginJs() {
      let that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.autoLogin(res.code);
          } else {
            uni.hideLoading();
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
    },
    /* 免登录-每个界面调用 */
    async autoLogin(code) {
      let that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            const data = response.data;
            that.authKey = data.key;
            that.openIdadw = data.openId;
            if (data.type === "login") {
              uni.setStorageSync("uid", data.uid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
              uni.hideLoading();
            } else {
              that.initUserregister();
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
        },
      });
    },
    initUserregister() {
      var params = {
        key: this.authKey,
        type: "routine",
        openId: this.openIdadw,
        phone: "",
        password: "",
        captcha: "",
        codeOrPassword: "3",
        inviterLinkId: this.yaoiqngID ? this.yaoiqngID : "",
        inviteeType: this.userType,
      };
      notBindingPhone(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          const data = res.data;
          uni.setStorageSync("uid", data.uid);
          uni.setStorageSync("token", data.token);
          uni.setStorageSync("userInfo_data", data);
          uni.setStorageSync("openID", this.authKey);
          this.initUser();
        }
      });
    },
    gotoUrl(item) {
      uni.navigateTo({
        url: "/pages_h5/householdServices/info?id=" + item.id + "&name=" + item.name,
      });
    },
    getData() {
      getMerInfoByid({ id: "1761701115809177", status: 1 }).then((res) => {
        this.category = res.data.activityList;
        this.storeProductReplyList = res.data.storeProductReplyList;
      });
    },
  },
};
</script>

<style>
page {
  background: #f5f5fb;
  width: 100%;
  height: 100%;
}
.adwaffa {
  background-image: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/11/595b738e6ada432548d3a72befaed1a3_20251111160747A029.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* background-image: linear-gradient(to bottom right, #e7f3ff, #fff); */
}
.dawfgadw {
  background-image: linear-gradient(to bottom right, #d1f4fe, #c4f2e2);
}
</style>
